X-Zoom est un module de Xooloop CMS qui facilite la gestion des images et des miniatures sur votre site web. Ecrit en javascript, il est compatible avec tous les navigateurs web (pas besoin d'installer un plugin).
Si votre site web a une charte graphique exigeante qui nécessite des images ayant une certaine taille (ou un certain ratio largeur / hauteur), alors X-Zoom vous facilitera la vie:
- Plus besoin de redimensionner vous-même vos image dans un logiciel de retouche photo avant de les charger sur votre site: X-Zoom le fera pour vous !
- Il vous suffit de charger votre image brute, sans aucune retouche, puis d'y définir une zone d'intérêt directement dans l'administration de votre site. La zone d'intérêt est une zone que vous voulez toujours voir affichée en entier dans toutes les miniatures et images qui seront faites à partir de l'image brute initiale.
- Ensuite Xooloop CMS affichera tout seul les miniatures aux dimensions imposées par votre charte graphique. Si ces vignettes n'existent pas, X-Zoom les créera automatiquement à votre place.
- A partir d'une seule image + une zone d'intérêt, votre site peut afficher tout seul des miniatures ayant des formes et dimensions différentes.
X-Zoom est disponible depuis la version 2.1.0 de Xooloop CMS.
Exemple d'utilisation
Votre site web affiche des œuvres d’art avec des visuels pour chaque œuvre.
Sur la page d’accueil, des miniatures rectangulaires de certaines œuvres sont affichées les unes sous les autres:
En pied de page, ou dans une barre latérale, certaines œuvres sont aussi montrées, cette fois-ci avec une miniature carrée:
Enfin, sur la page présentant chaque œuvre, l’image est visible en grande taille, en respectant sa forme initiale (sans contrainte de forme):
Quelle sera votre charge de travail pour respecter cette charte graphique lorsque vous voudrez ajouter une œuvre sur votre site?
Etudions deux scenarii:
Avec un outil d'administration classique (CMS)
Avec Xooloop CMS v2.1.0 et X-Zoom
Possibilités de X-Zoom
A partir d’une seule image + 1 seule « zone d’intérêt », il est possible de générer des miniatures avec différentes options:
X-Zoom : facile à utiliser
Dans Xooloop CMS, éditez l'article sur lequel vous désirez ajouter une image. Ajoutez votre image dans la liste des images:
Cliquez ensuite sur le bouton : une fenêtre de dialogue s'ouvre alors: cliquez et glissez votre souris pour définir la zone d'intérêt:
Confirmez: dans la liste des images, vous pouvez voir que la zone d'intérêt a bien été prise en compte (son contour est coloré en rouge dans la miniature de l'image):
Sauvez les modifications de votre article, et c'est terminé !
Les options des miniatures sont définies dans les gabarits graphiques de votre site: chaque page saura donc quelle taille et quel style de miniature afficher.
Les avantages de X-Zoom
- avec X-Zoom, administrer votre site sera plus facile et rapide: plus besoin de créer vos miniatures à la main, et d'en charger plusieurs sur le site pour chaque image: chargez simplement votre image et sélectionnez une zone dedans
- Xooloop CMS se charge ensuite d'appeler X-Zoom dès qu'une miniature doit être affichée: X-Zoom regarde si la miniature a déjà été créée (cache des miniatures): si oui, il affiche la bonne miniature, sinon, il la créé, la rajoute dans le cache du site (pour une prochaine utilisation), et l'affiche à l'internaute
- toutes les opérations de manipulation des images et des miniatures sont faites par le serveur web, qui dispose de la puissance nécessaire: aucune contrainte sur l'ordinateur que vous utilisez pour mettre à jour votre site
- l'utilisation de miniatures à la bonne taille permet de réduire drastiquement les besoins en bande passante: votre site s'affiche plus vite, et les images sont aussi visibles si la connection est lente (2G, GPRS, 3G)
- si vous modifiez la charte graphique de votre site, et que la forme des miniature est différente sur la nouvelle charte, vous n’aurez rien à faire du tout, Xooloop CMS et X-Zoom feront le travail pour vous, à la volée. A l’inverse, avec un outil d’administration (CMS) classique, vous devriez refaire toutes les miniatures de toutes les images du site à la main sous un logiciel de retouche !